<template>
  <div w-full h-screen box-border pa-60px flex flex-col items-center :style="{ backgroundColor: curTopic.bgColor }">
    <div w-full flex flex-col justify-center items-center bg-white rounded-40px py-50px>
      <img src="@/assets/images/huanying_title.png" w-600px h-60px alt="" />
      <img src="@/assets/images/sub_huanying_title.png" w-797px h-17px mt-28px alt="" />
    </div>
    <img src="@/assets/images/line.png" w-840px h-1px mt--1px alt="" />
    <!-- <div w-full flex justify-center items-center>
      <div class="dashed-line"></div>
    </div> -->
    <div w-full flex flex-col items-center bg-white rounded-40px pt-40px pb-54px h-1410px>
      <div w-full box-border px-86px flex justify-between items-center>
        <div>
          <div text-47px font-bold mb-6px>{{ curTopic.title }}</div>
          <!-- <img src="@/assets/images/topic_line.png" w-150px h-10px alt="" /> -->
          <titleline :color="curTopic.mainColor" w-150px h-10px></titleline>
          <div text-40px mt-30px style="font-family: Douyin Sans, Douyin Sans">手环编号: {{ no }}</div>
        </div>
        <div text-40px>
          <span text-76px mr-10px style="font-family: SanJiLiLiangTiJian">{{ memberInfo.points }}</span>
          分
        </div>
      </div>
      <!-- <div w-840px h-1px shrink-0 :style="{ backgroundColor: curTopic.mainColor }"></div> -->
      <div w-full text-40px>
        <!-- <div w-full flex my-40px justify-around items-center text="#666">
          <div v-for="item in tabs"  :key="item.key" h-100px flex flex-col justify-center items-center :style="{ color: curTabKey === item.key ? curTopic.mainColor : '' }" @click="curTabKey = item.key">
            <div mb-20px>{{ item.title }}</div>
            <div h-3px w-210px bg-white :style="{ backgroundColor: curTabKey === item.key ? curTopic.mainColor : '' }"></div>
          </div>
        </div> -->
        <div flex flex-a-c p-46px overflow-x-auto w-full box-border bg="#fff">
          <div
            v-for="(item, index) in tabs"
            @click="curTabKey = item.key"
            :key="index"
            flex
            flex-items-center
            flex-col
            shrink-0
            px-29px
            text-center
            cursor-pointer>
            <div
              font-bold
              text-40px
              h-90px
              flex
              items-center
              shrink-0
              :class="{ 'text-44px': curTabKey === item.key }"
              :style="{
                color: curTabKey === item.key ? '#111' : '#666'
              }">
              {{ item.title }}
            </div>
            <div
              h-10px
              w-85px
              rounded-14px
              :style="{
                backgroundColor: curTabKey === item.key ? curTopic.bgColor : 'transparent'
              }"></div>
          </div>
        </div>
        <div h-987px overflow-auto>
          <xunzhang v-if="curTabKey === 'xunzhang'" :dataList="memberInfo.medalList" />
          <jiangbei v-if="curTabKey === 'tupo'" :dataList="memberInfo.trophyList"  />
          <jifen v-if="curTabKey === 'jifen'" :no="no" :zonghe="zongheFlag" />
        </div>
      </div>
    </div>
    <!-- <div fixed bottom-70px>
      <div
        w-588px
        h-100px
        rounded-50px
        text="#fff"
        flex
        justify-center
        items-center
        text-42px
        font-bold
        style="border: 3px solid #fff" :style="{ backgroundColor: curTopic.mainColor }" @click="toSearch">
        综合查询
      </div>
    </div> -->
    <div
      flex
      justify-around
      items-center
      fixed
      bottom-70px
      w-619px
      h-144px
      bottom-58px
      rounded-full
      bg="#fff"
      px-20px
      box-border
      style="box-shadow: 0px 0 15px 3px rgba(167, 167, 167, 0.5)"
      @click="toSearch">
      <div
        :style="{ backgroundColor: curTopic.mainColor }"
        w-full
        h-115px
        rounded-full
        flex
        justify-center
        items-center
        text-46px
        style="font-family: PingFang SC, PingFang SC">
        综合查询
      </div>
    </div>
  </div>
  <back></back>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { cardInfo } from '@/api/index'
import { useConfigStore } from '@/store/modules/config'
import { startRedirectToHome, stopRedirectToHome } from '@/utils/screenSaver'
import xunzhang from '@/components/xunzhang/index.vue'
import jiangbei from '@/components/jiangbei/index.vue'
import jifen from '@/components/jifen/index.vue'
import back from '@/components/back/index.vue'
import titleline from '@/components/titleline/index.vue'

const route = useRoute()
const router = useRouter()
const configStore = useConfigStore()

// 状态管理
const curTopic = configStore.topics
const deviceInfo = configStore.deviceInfo

const no = ref(route.query.no)
const curTabKey = ref('xunzhang')
const tabs = ref([
  { title: '勋章', key: 'xunzhang' },
  { title: '奖杯', key: 'tupo' },
  { title: '积分', key: 'jifen' }
])
const memberInfo = ref({}) // 智能卡信息


// 跳转搜索页
function toSearch() {
  router.push({ path: '/searchZh', query: { no: no.value } })
}

// 数据初始化
function getCardInfo() {
  cardInfo({ memberNumber: no.value, subjectId: curTopic.subjectId, ...deviceInfo }).then((res) => {
    memberInfo.value = res.data
    configStore.setLogId(res.data.logId)
  })
}

const resetTimer = () => {
  startRedirectToHome() // 重置跳转逻辑
}

onMounted(() => {
  getCardInfo()
  startRedirectToHome()
  // 监听用户操作事件
  document.addEventListener('click', resetTimer)
  document.addEventListener('touchstart', resetTimer)
})

onUnmounted(() => {
  stopRedirectToHome()
  // 移除用户操作事件监听
  document.removeEventListener('click', resetTimer)
  document.removeEventListener('touchstart', resetTimer)
})
</script>

<style scoped>
.dashed-line {
  width: 92%;
  height: 2px;
  background: linear-gradient(
    to right,
    #fff 0%,
    #fff 10%,
    transparent 10%,
    transparent 20%,
    #fff 20%,
    #fff 40%,
    transparent 40%,
    transparent 70%,
    #fff 70%,
    #fff 90%
  );
  background-size: 100px 100%; /* 控制整个虚线周期的长度 */
  background-repeat: repeat-x;
}
</style>
